<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1 -->
    <div id="fei">
        <button  @mouseover="a" @mouseout="b">移动</button>
        <p v-show="yidong">一点寒芒先到，随后枪出如龙</p>
    </div>

    <!-- 2 -->
    <style>
        .afei{
            width: 200px;
            height: 100px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
    </style>
    <div id="fei1">
        <div class="afei" v-if="b">
            <input type="text">
            <input type="text">
            <button @click="guan">关闭</button>
        </div>
        <button @click="deng">登录</button>
    </div>

    <!-- 3 -->
    <style>
        .aafei{
            width: 200px;
            height: 50px;
            border: 1px solid black;
            line-height: 50px;
        }
        .hongse{
            width: 200px;
            color: aqua;
        }
    </style>
    <div id="fei2">
        <div class="aafei" @click="xuanzhong=1" :class="{'hongse':xuanzhong === 1}">支付宝</div>
        <div class="aafei" @click="xuanzhong=2" :class="{'hongse':xuanzhong === 2}">微信</div>
        <div class="aafei" @click="xuanzhong=3" :class="{'hongse':xuanzhong === 3}">银行卡</div>
    </div>

    <!-- 4 -->
    <style>
        #fei3{
            width: 250px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .xuanxiangka{
            width: 250px;
            height: 250px;
            line-height: 250px;
            text-align: center;
            border: 1px solid black;
        }
        .bule{
            color: blue;
        }
    </style>
    <div id="fei3">
        <button @click="anniu=0" :class="{'bule':anniu === 0}">按钮一</button>
        <button @click="anniu=1" :class="{'bule':anniu === 1}">按钮二</button>
        <button @click="anniu=2" :class="{'bule':anniu === 2}">按钮三</button>
        <button @click="anniu=3" :class="{'bule':anniu === 3}">按钮四</button>
        <div class="xuanxiangka" v-if="anniu===0">雷鑫捞</div>
        <div class="xuanxiangka" v-if="anniu===1">杨凯斐捞</div>
        <div class="xuanxiangka" v-if="anniu===2">赫阳捞</div>
        <div class="xuanxiangka" v-if="anniu===3">张天宇捞</div>
    </div>

    <!-- 5 -->
    <style>
        .xiala{
            width: 250px;
            height: 25px;
            border: 1px solid black;
            display: flex;
            justify-content: space-between;
        }
        .limian{
            width: 250px;
            height: 100px;
            border: 1px solid black;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }
        .xuanxiang{
            display: flex;
            justify-content: space-between;
        }
    </style>
    <div id="fei4">
        <div class="xiala" @click="zhan = !zhan">{{yang}}</div>
            <div v-show="zhan" v-for="(a,b) in xuanze" @click="yang = a; zhan = false">{{a}}</div>
    </div>

    <!-- 6 -->
    <style>
        #fei5{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .hei{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }
    </style>
    <div id="fei5">
        <input type="text" placeholder="输入的内容" v-model="afei">
        <button @click="areYouSure">确定</button>
            <div class="hei">
                <p v-for="(a,b) in AAfei">{{a.afei}}
                    <button @click="shanChu(b)">删除</button>
                </p>
            </div>
    </div>

    <!-- 7 -->
    <div id="fei6">
        <input :type="yincang?'text':'password'" >
        <input type="checkbox" @click="yincang=!yincang">
        <button>密码</button>
    </div>

    <!-- 8 -->
    <div id="fei7">
        <textarea type="text" v-model="xianzi" maxlength="200"></textarea>
            <span>{{200-xianzi.length}}/200</span>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp , ref} = Vue

    // 1
    createApp({
        setup(){
            let yidong = ref(false)
            function a() {
                yidong.value = true
            }
            function b() {
                yidong.value = false
            }
            return{
                yidong,
                a,
                b
            }
        }
    }).mount('#fei')


    // 2
    createApp({
        setup(){
            let b = ref(false)

            function deng() {
                b.value = true
            }
            function guan() {
                b.value = false
            }

            return{
                b,
                deng,
                guan
            }
        }

    }).mount('#fei1')

    // 3
    createApp({
        setup(){
            let red = ref('hongse')
            let xuanzhong = ref(1)
            return{
                red,
                xuanzhong
            }
        }
    }).mount('#fei2')

    // 4
    createApp({
        setup(){
            let anniu = ref(0)
            let yanse = ref('bule')
            return{
                anniu,
                yanse
            }
        }
    }).mount('#fei3')

    // 5
    createApp({
        setup(){
            let xuanze = ref(['杨凯斐','雷鑫','张天宇','赫阳'])
            let zhan = ref(false)
            let yang = ref('杨凯斐')
            return{
                xuanze,
                zhan,
                yang
            }
        }
    }).mount('#fei4')

    // 6
    createApp({
        setup(){
            let afei = ref("")
            let AAfei = ref([])
            function areYouSure() {
                AAfei.value.push({
                    afei:afei.value,
                })
                afei.value = ''
            }
            function shanChu(e) {
                AAfei.value.splice(e,1)
            }
            return{
                afei,
                areYouSure,
                AAfei,
                shanChu
            }
        }
    }).mount('#fei5')

    // 7
    createApp({
        setup() {
            let yincang=ref(false)
            return {
                yincang
            }
        }
    }).mount('#fei6')

    // 8
    createApp({
        setup() {
            let xianzi=ref('')
            return {
            xianzi
            }
        }
    }).mount('#fei7')
</script>
</html>